<template>
    <div
        :style="{ color: active ? activedColor : color }"
        @click="onShowPopup">
        <van-icon name="filter-o" />
        {{ $st("Filter") }}
    </div>

    <van-popup
        round
        class="container"
        v-model:show="popupShow"
        position="top"
        :style="{ minHeight: '420px' }"
        @close="onClose"
    >

        <van-form
            class="form"
            @reset="onReset()">
            <van-row class="row-title">
                <van-col span="12">
                    {{ '派单日期' }}
                </van-col>
            </van-row>
            <van-row
                class="row"
                justify="center">
                <van-col span="24">
                    <div class="calendar-row">
                        <van-field
                            center
                            input-align="center"
                            class="field"
                            :placeholder="$st('wp_Start_Time')"
                            v-model="calendarData.calendarBegin"
                            @click="calendarShow = true"
                            readonly
                        />
                        <label> 一 </label>
                        <van-field
                            center
                            input-align="center"
                            class="field"
                            :placeholder="$st('wp_End_Time')"
                            v-model="calendarData.calendarEnd"
                            @click="calendarShow = true"
                            readonly
                        />
                    </div>
                </van-col>
            </van-row>
            <van-calendar
                v-model:show="calendarShow"
                type="range"
                color="#1989fa"
                :min-date="minDate"
                @confirm="onCalendarConfirm"
            >
            </van-calendar>
            <van-row class="row-title">
                <van-col span="12">
                    {{ '维检日期' }}
                </van-col>
            </van-row>
            <van-row
                class="row"
                justify="center">
                <van-col span="24">
                    <div class="calendar-row">
                        <van-field
                            center
                            input-align="center"
                            class="field"
                            :placeholder="$st('wp_Start_Time')"
                            v-model="calendarData.checkcalendarBegin"
                            @click="checkcalendarShow = true"
                            readonly
                        />
                        <label> 一 </label>
                        <van-field
                            center
                            input-align="center"
                            class="field"
                            :placeholder="$st('wp_End_Time')"
                            v-model="calendarData.checkcalendarEnd"
                            @click="checkcalendarShow = true"
                            readonly
                        />
                    </div>
                </van-col>
            </van-row>
            <van-calendar
                v-model:show="checkcalendarShow"
                type="range"
                color="#1989fa"
                :min-date="minDate"
                @confirm="oncheckCalendarConfirm"
            >
            </van-calendar>
            <van-row class="row keyword-row">
                <van-col span="12">
                    {{ $st("wp_Keyword_Search") }}
                </van-col>
            </van-row>
            <van-row
                class="row"
                justify="center">
                <van-col span="24">
                    <van-field
                        center
                        input-align="center"
                        class="field"
                        v-model="maintainworkorderid"
                        name="维检单号"
                        placeholder="维检单号"
                    />
                </van-col>
            </van-row>
            <van-row
                class="row"
                gutter="10"
                justify="center">
                <van-col span="12">
                    <van-field
                        center
                        input-align="center"
                        class="field"
                        v-model="customer_name"
                        name="客户名称"
                        placeholder="客户名称"
                    />
                </van-col>
                <van-col span="12">
                    <van-field
                        center
                        input-align="center"
                        class="field"
                        v-model="administrator"
                        name="维检负责人"
                        placeholder="维检负责人"
                    />
                </van-col>
            </van-row>
            <van-row
                class="row"
                justify="center">
                <van-col span="24">
                    <div class="button-group">
                        <van-button
                            round
                            block
                            type="primary"
                            class="button-left"
                            native-type="reset"
                        >
                            {{ $st("reset") }}
                        </van-button>
                        <van-button
                            round
                            block
                            class="button-right"
                            type="primary"
                            native-type="submit"
                            @click="onClick"
                        >
                            {{ $st("wp_submit") }}
                        </van-button>
                    </div>
                </van-col>
            </van-row>
        </van-form>
    </van-popup>
</template>
<script>
import Cookies from 'js-cookie';
import { reactive, ref, toRefs, watch } from 'vue';
import { Col, Row, ActionBar, ActionBarButton } from 'vant';

import moment from 'moment';
// import { selfI18n } from '@/i18n';
export default {
    emits: ['submit', 'updated:active', 'resetclick'],
    props: {
        active: { type: Boolean, default: false },
        activedColor: { type: String, default: '#000000' },
        color: {
            type: String,
            default: '#000000'
        },
        filterData: Object,
        title: {
            type: String
        }
    },
    components: {
        [Col.name]: Col,
        [Row.name]: Row,
        [ActionBar.name]: ActionBar,
        [ActionBarButton.name]: ActionBarButton
    },
    setup (props, context) {
        const popupShow = ref(false);
        const isReset = ref(false);
        const maxDate = new Date();
        const minDate = new Date();
        // const $st = selfI18n;

        minDate.setMonth(minDate.getMonth() - 6);
        const state = reactive({
            maintainworkorderid: '',
            customer_name: '',
            administrator: ''
        });
        const onShowPopup = () => {
            popupShow.value = !popupShow.value;
        };
        const resetdata = (val) => {
            if (val === 'sendordertime') {
                calendarData.calendarBegin = '';
                calendarData.calendarEnd = '';
            } else if (val === 'maintaintime') {
                calendarData.checkcalendarBegin = '';
                calendarData.checkcalendarEnd = '';
            } else if (val === 'maintainworkorderid') {
                state.maintainworkorderid = '';
            } else if (val === 'customer_name') {
                state.customer_name = '';
            } else {
                state.administrator = '';
            }
        };

        const calendarShow = ref(false);
        const checkcalendarShow = ref(false);
        /* const formatcalendar = (val) => {
            if (val === '' || val === undefined) {
                return '';
            } else {
                return moment(val).format('YYYY-MM-DD');
            }
        }; */

        // console.log(props.modelValue);
        const calendarData = reactive({
            calendarBegin: '',
            calendarEnd: '',
            checkcalendarBegin: props.filterData.maintaintimestart,
            checkcalendarend: props.filterData.maintaintimeend
        });
        console.log(calendarData);
        const reset = () => {
            isReset.value = true;
            calendarData.calendarBegin = '';
            calendarData.calendarEnd = '';
            calendarData.checkcalendarBegin = '';
            calendarData.checkcalendarEnd = '';

            state.maintainworkorderid = '';
            state.customer_name = '';
            state.administrator = '';
            // context.emit('resetclick');
        };
        const onCalendarConfirm = (values) => {
            const [start, end] = values;
            // console.log(values);
            calendarShow.value = false;
            calendarData.calendarBegin = moment(start).format('YYYY-MM-DD');
            calendarData.calendarEnd = moment(end).format('YYYY-MM-DD');
        };
        const oncheckCalendarConfirm = (values) => {
            const [start, end] = values;
            // console.log(values);
            checkcalendarShow.value = false;
            calendarData.checkcalendarBegin = moment(start).format('YYYY-MM-DD');
            calendarData.checkcalendarEnd = moment(end).format('YYYY-MM-DD');
        };
        const onClose = () => {};
        const onReset = () => {
            reset();
            // context.emit('resetclick');
            context.emit('update:active', false);
        };
        const onClick = () => {
            popupShow.value = false;
            // console.log(calendarData.calendarBegin);
            const filterData = {
                // status: 'all',
                // 派单时间范围
                sendordertimeend: !calendarData.calendarEnd
                    ? ''
                    : moment(calendarData.calendarEnd)
                        .endOf('day')
                        .format('YYYY-MM-DD HH:mm:ss'),
                sendordertimestart: !calendarData.calendarBegin
                    ? ''
                    : moment(calendarData.calendarBegin)
                        .startOf('day')
                        .format('YYYY-MM-DD HH:mm:ss'),
                // 维检日期范围
                maintaintimeend: !calendarData.checkcalendarEnd
                    ? ''
                    : moment(calendarData.checkcalendarEnd)
                        .endOf('day')
                        .format('YYYY-MM-DD HH:mm:ss'),
                maintaintimestart: !calendarData.checkcalendarBegin
                    ? ''
                    : moment(calendarData.checkcalendarBegin)
                        .startOf('day')
                        .format('YYYY-MM-DD HH:mm:ss'),
                // 责任人
                maintainworkorderid: state.maintainworkorderid,
                administrator: state.administrator,
                customer_name: state.customer_name,
                username: Cookies.get('username')
            };
            console.log();
            // context.emit('resetclick');
            context.emit('submit', filterData);
            if (!isReset.value) {
                // 不是重置状态,就设置
                context.emit('update:active', true);
                context.emit('resetclick');
            }
        };
        watch(
            () => props.active,
            (newVal, oldVal) => {
                if (!newVal) {
                    reset();
                }
            }
        );

        watch(
            [
                () => calendarData.calendarBegin,
                () => calendarData.calendarEnd,
                () => calendarData.checkcalendarBegin,
                () => calendarData.checkcalendarEnd,
                () => state.maintainworkorderid,
                () => state.administrator,
                () => state.customer_name
            ],
            () => {
                if (isReset.value) {
                    isReset.value = false;
                }
            }
        );

        return {
            maxDate,
            minDate,
            onClose,
            onReset,
            onClick,
            popupShow,
            onShowPopup,
            calendarShow,
            checkcalendarShow,
            calendarData,
            onCalendarConfirm,
            oncheckCalendarConfirm,
            ...toRefs(state),
            resetdata
        };
    }
};
</script>
<style lang="scss" scoped>
// .van-overlay{
//     top: 55px;
// }
// .van-popup.van-popup--round{
//     margin-top: 55px;
// }
.container {
    // margin-top: 90px;
  border-radius: 10px;
}
.date-button {
  width: 100%;
  height: 32px;
}
.checked {
  color: #1890ff;
  border-color: black;
  opacity: 1;
  background: #e8f4ff;
  border: 1px solid #1890ff;
}
.calendar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.check-button-group {
  .van-button {
    width: 110px;
    height: 32px;
    opacity: 1;
    background: #f6f6f6;
    border-radius: 16px;
  }
}
.container {
  overflow: hidden;
  padding: 5px;
  height: auto;
}
.form-title {
  height: 50px;
  line-height: 50px;
//   padding-top: 5px;
  background-color: rgb(240, 240, 240);
  box-shadow: 0px 1px 1px rgba(204, 204, 204, 0.5);
}
.filterallclass{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 15px;
}
.form-title-text {
    text-align: center;
     font-size: 15px;
     width: 100%;
}
.filterclass{
    font-size: 14px;
}
.form {
  overflow: hidden;
  padding: 15px 10px 0px 10px;
}
.row {
  margin-top: 10px;
}
.keyword-row{
    font-size: 15px;
    margin-top: 25px;
    margin-bottom: 25px;
}
.field {
  height: 32px;
  line-height: 32px;
  background: #f6f6f6;
  border-radius: 16px;
}
.row-title {
  font-size: 15px;
  height: 20px;
  line-height: 20px;
  margin-top: 5px;
}
.button-group {
  margin: 20px 5px 15px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .button-left {
    font-size: 18px;
    color: #1890ff;
    opacity: 1;
    background: #e8f4ff;
    border: 1px solid #1890ff;
    border-radius: 20px 0px 0px 20px;
  }
  .button-right {
    font-size: 18px;
    color: #ffffff;
    opacity: 1;
    background: #1890ff;
    border-radius: 0px 20px 20px 0px;
  }
}
</style>
